import { IFormItem } from "@/components/IForm";
import { TextStyleActionEnums } from "@/enums/titleEnums";
import IAccordion, { IAccordionItem } from "@/components/IAccordion";
import { ColorInput, Select, Slider } from '@mantine/core'

import { IActionOpts } from "@/types";
import { useTitleAttrStore } from '@/store'
import { TextFamilyOpts, TextStyleOpts, TextWeightOpts } from "./settings";

export default function FontStylePanel() {
  const textStyles = useTitleAttrStore(state => state.textStyle);
  const dispatch = useTitleAttrStore(state => state.setTextStylesAttrs);

  function onAction({ event, data }: IActionOpts<TextStyleActionEnums>) {
    console.log(222, event, data);
    dispatch(event, data);
  }

  return (
    <IAccordion opens={['font']}>
      <IAccordionItem title="字体" value="font">
        <form>
          <IFormItem label="颜色">
            <ColorInput 
            size="xs" 
            styles={{ input: { width: '180px' } }}
            defaultValue={textStyles.color} 
            onChange={(value) => onAction({ event: TextStyleActionEnums.Color, data: value })} />
          </IFormItem>
          <IFormItem label="字体类型">
            <Select 
            size="xs" 
            defaultValue={textStyles.fontStyle}  
            onChange={(value) => onAction({ event: TextStyleActionEnums.FontStyle, data: value })}
            data={TextStyleOpts} />
          </IFormItem>
          <IFormItem label="字体粗细">
            <Select 
            size="xs" 
            defaultValue={String(textStyles.fontWeight)}  
            data={TextWeightOpts}
            onChange={(e) => onAction({ event: TextStyleActionEnums.FontWeight, data: e })}
             />
          </IFormItem>
          <IFormItem label="字体系列">
            <Select 
            size="xs"
            data={TextFamilyOpts}
            defaultValue={textStyles.fontFamily}
            onChange={(e) => onAction({ event: TextStyleActionEnums.FontFamily, data: e })}
            />
          </IFormItem>
          <IFormItem label="字体大小">
            <Slider 
            min={12}
            max={50}
            defaultValue={textStyles.fontSize} 
            onChange={(value) => onAction({ event: TextStyleActionEnums.FontSize, data: value })} />
          </IFormItem>
        </form>
      </IAccordionItem>
    </IAccordion>
  )
}